<template>
  <div class="register-container">
    <el-card class="register-box">
      <h1 class="register-title">注册</h1>
      <el-form :model="registerForm" @submit.prevent="register">
        <el-form-item label="用户名" prop="username" class="form-item" label-width="100px">
          <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password" class="form-item" label-width="100px">
          <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" class="form-item" label-width="100px">
          <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              prefix-icon="Lock"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" class="register-button">
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <p v-if="message" class="message">{{ message }}</p>
      <p class="login-link">
        已有账号？<router-link to="/login">立即登录</router-link>
      </p>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';


export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
      },
      message: '', // 添加一个用于显示消息的属性
    };
  },
  methods: {
    async register() {
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        ElMessage.error('两次输入的密码不一致');
        this.message = '两次输入的密码不一致'; // 设置消息
        return;
      }

      try {
        const response = await axios.post(
            'http://localhost:8080/api/users/register',
            {
              username: this.registerForm.username,
              password: this.registerForm.password,
            },
            {
              headers: {
                'Content-Type': 'application/json', // 设置请求头为 JSON
              },
            }
        );

        if (response.data.message === 'Registration successful') {
          ElMessage.success('注册成功，请登录');
          this.message = '注册成功，请登录'; // 设置消息
          this.$router.push('/login'); // 跳转到登录页
        } else {
          ElMessage.error('注册失败，请重试');
          this.message = '注册失败，请重试'; // 设置消息
        }
      } catch (error) {
        ElMessage.error('注册失败，请重试');
        this.message = '注册失败，请重试'; // 设置消息
      }
    },
  },
};
</script>


<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  background-size: cover;
  width: 100vw;
}

.register-box {
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.form-item .el-form-item__label {
  width: 100px; /* 固定标签宽度 */
  text-align: right; /* 标签右对齐 */
  padding-right: 12px; /* 标签与输入框的间距 */
}

.register-button {
  width: 100%;
  margin-top: 10px;
}

.login-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

.login-link a {
  color: #409eff;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>